<template>
  <div id="modifyPassword" class="person-detail">
    <div>
      <van-nav-bar title="修改密码" :fixed="true" left-arrow @click-left="back" />
    </div>
    <div style="background:#fff;">
      <van-cell-group>
        <van-field v-model="sms1" center clearable placeholder="请输入手机号" />
        <van-field v-model="sms2" center clearable placeholder="请输入短信验证码">
          <van-button slot="button" size="small" plain hairline type="primary" :disabled=disabled @click="sendMessage()"
            style="border:none;color:#DC4630;">{{buttontext}}</van-button>
        </van-field>
        <van-field v-model="sms3" type="password" center clearable placeholder="请输入原密码" />
        <van-field v-model="sms4" type="password" center clearable placeholder="输入新密码" />
        <p style="text-align:left;padding-left:15px;">
          密码由6-12位数字及字母组成，字母区分大小写
        </p>
        <van-field v-model="sms5" center clearable type="password" placeholder="请再次输入新密码" />
      </van-cell-group>
      <van-button type="confirm" class="next-step-button" @click="confirm()">确定</van-button>
    </div>
  </div>
</template>
<script>
  import mine from "../../../controller/mine";
  import md5 from "js-md5";
  import util from "@/controller/Common/util.js";
  export default {
    name: "modifyPassword",
    components: {},
    data() {
      return {
        isSendMessage: true,
        sms1: "",
        sms2: "",
        sms3: "",
        sms4: "",
        sms5: "",
        time: null,
        disabled: false,
        buttontext: '获取验证码',
        second: 60,
      };
    },
    computed: {},
    created() {},
    mounted() {},
    methods: {
      checkPhone() {
        return util.validatePhoneNum(this.sms1);
      },
      timer() {
        if (this.second > 0) {
          this.disabled = true;
          this.second--;
          this.buttontext = this.second + "秒";
          setTimeout(this.timer, 1000);
        } else {
          this.second = 0;
          this.buttontext = "获取验证码";
          this.disabled = false;
        }
      },
      sendMessage() {
        this.second = 60
        if (this.checkPhone()) {
          mine.user_v1_msg_code(this.sms1).then(res => {
            if (res.code === "0") {
              this.$toast("发送成功");
              this.timer()
            } else {
              this.second = 0;
              this.buttontext = "获取验证码";
              this.disabled = false;
            }
          });
        } else {
          this.$toast("请输入正确的手机号");
          this.second = 0;
          this.buttontext = "获取验证码";
          this.disabled = false;
        }
      },
      back() {
        this.$router.go(-1);
      },
      confirm() {
        if (this.sms4 !== this.sms5) {
          this.$toast("两次输入的密码不一致");
          return;
        }
        if (
          this.sms1 === "" ||
          this.sms2 === "" ||
          this.sms3 === "" ||
          this.sms4 === "" ||
          this.sms5 === ""
        ) {
          this.$toast("输入不能为空");
          return;
        }
        let data = {
          code: this.sms2,
          originPassword: md5(this.sms3),
          password: md5(this.sms5),
          phone: this.sms1
        };
        mine.security_v1_changePassword(data).then(res1 => {
          if (res1.code === "0") {
            this.$toast("修改成功");
            this.$router.push({
              path: "/person/personaldetail"
            });
          } else {
            this.$toast(res1.msg)
          }
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
  #modifyPassword>div:nth-child(2) {
    text-align: center;
    margin-top: 2em;

    >p {
      text-align: left;
    }

    .van-cell-group {
      padding: 10px 20px;
    }

    .next-step-button {
      background: #dc4630;
      border-radius: 52px;
      color: #fff;
    }

    .van-cell {
      border-bottom: 0.02667rem solid #edeff2;
    }
  }
</style>
<style lang="scss">
  @import "../style/index.scss";
</style>